<template>
    <div class="search-wrapper">
        
        <v-app-bar
            absolute
            color="white"
            shrink-on-scroll
            :src="imgCover + '?imageView&thumbnail=414y360&quality=75&tostatic=0'"
            fade-img-on-scroll
            dense
            app
            scroll-target="#song-cell"
            height="40"
        >
            <template v-slot:img="{ props }">
                <v-img
                v-bind="props"
                gradient="to top right, rgba(251,231,231,.5), rgba(253,241,242,.8)"
                ></v-img>
            </template>
            <v-icon
                @click="$router.push('/home/main')"
                large
                color="gruy  darken-2"
            >
            mdi-chevron-left
            </v-icon>
            <v-text-field
                v-model="keyword"
                single-line
                clearable
                @blur="searchSong"
                autofocus
                @keyup.enter="searchSong"
            ></v-text-field>
        </v-app-bar>
        
        <v-main>
            
            <v-sheet id="song-cell" class="cell-warpper overflow-y-auto" max-height="1000" >
                <v-container style="height: auto;">
                    <router-view></router-view>
                    <History ref="history" @keyword-click="handlerKeyword"></History>
                    <HotSearchRank @keyword-click="handlerKeyword"></HotSearchRank>
                    <SearchCategory></SearchCategory>
                </v-container>
            </v-sheet>
        </v-main>
            
        
        <Control />
    </div>
</template>

<script>
import api from '@/api/index.js'

import History from '@/components/search/history'
import HotSearchRank from '@/components/search/hotSearch'
import SearchCategory from '@/components/search/searchCategory'
import Control from '@/components/control/control'
import {musicMixin} from '@/utils/mixin'

export default {
    data(){
        return {
            keyword: '',
            hotSearchList: [],
            songs: []
        }
    },
    mixins: [musicMixin],
    watch: {
        $route() {
            this.keyword = this.$route.query.keyword || '';
        }
    },
    components: {
        History,
        HotSearchRank,
        SearchCategory,
        Control
    },
    methods: {
        searchSong() {
            if(!this.keyword) return;
            

            this.gotoSearchList(this.keyword)
        },

        handlerKeyword(data){
            this.gotoSearchList(data);
        },

        gotoSearchList(keyword){
            let key = localStorage.getItem('historyKey');
            if(key){
                key = JSON.parse(key);
                let index = key.findIndex(i => i === keyword);
                if(index >= 0) key.splice(index, 1);
                key.unshift(keyword);

                localStorage.setItem('historyKey', JSON.stringify(key));
            }else{
                localStorage.setItem('historyKey', JSON.stringify([keyword]));
            }

            this.$router.push({
              path: '/search/list',
              query: {
                  keyword
              }
          })
        },

        getHotSearch(){
            api.getHotSearch().then(res => {
                console.log(res.data.result);
                this.hotSearchList = res.data.result;
            })
        }
    },
    mounted(){
        
        // 获取热搜词条
        this.getHotSearch();
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global';
    .search-wrapper {
        // display: flex;
        // padding: 0 px2rem(10);
        .cell-warpper {
            height: calc(100vh - 48px);
        }
    }
</style>